<template>
	<view class="ynq-Location">
		<!-- 字母区域 -->
		<view class="ynq-Letter">
			<view hover-class="Click-Latter" @tap="getLetter('ScrollTop')">*</view>
			<view v-for="(l,i) in LatterName" :key="i" hover-class="Click-Latter" @tap="getLetter(l)">{{l}}</view>
		</view>
		<view class="search">
			<u-search :show-action="false" action-text="搜索" :animation="true" v-model="keyword" @search="searchinput">
			</u-search>
		</view>
		<view class="ynq-AutoLocation flex">
			<view class="ynq-AutoAddress">
				<text class="ynq ynq-dizhi"></text>
				<text>当前定位：</text>
				<text>{{CityName}}</text>
			</view>
			<!-- <view class="ynq-ReLocation">
				<text class="ynq ynq-ditudingwei"></text>
				<text @click="getLocations">重新定位</text>
			</view> -->
		</view>
	
		<scroll-view scroll-y="true" class="ynq-ScrollView" :scroll-into-view="LetterId">
			<!-- 热门城市 -->
			<!-- <view class="ynq-HotCity" id="ScrollTop">
				<view class="ynq-HotCityTitle">
					<text class="ynq ynq-fire"></text>
					<text>热门城市</text>
				</view>
	
				<view class="ynq-HotCityList flex">
					<text class="radius-3" @tap="getStorage(item)" v-for="(item,index) in HotCity"
						:key="index">{{item}}</text>
				</view>
			</view> -->
		
			<!-- 城市列表 -->
			<view class="ynq-CityList">
				<block v-for="(item,index) in CityList" :key="index">
					<view class="ynq-CityLetter">{{item.initial}}</view>
					<view class="ynq-CityLine">
						<text @tap="getStorage(item_city)" v-for="(item_city,name_index) in item.list"
							:key="name_index">{{item_city.city_name}}</text>
					</view>
				</block>
			</view>
		</scroll-view>
	
	</view>
	
</template>

<script>
	import {postPosition,postLocation,searchPosition} from '@/api/position.js'
import { data } from '../../components/uview-ui/libs/mixin/mixin';
	
	export default {
		data() {
			return {
				locationName:'',
				citylists: [],
				// cityname: [],
				keyword: "",
				// CityName:'浙江',
				CityName: "",
				HotCity: ['北京', '深圳', '上海', '成都', '广州', '金华'],
				LatterName: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S',
					'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
				],
				CityList:{}, //引用json数据
				LetterId: '',
			lat:'',
			lng:''
			}
		},
		created() {
			var _this=this
			uni.getStorage({
				key:"City_Name",
				success: function (res) {
					console.log(res)
						_this.CityName=res.data
					}
			})
			uni.getStorage({
				key:"City_lat",
				success: function (res) {
					console.log(res)
					console.log(_this,999)
						_this.lat=res.data
					}
			})
			uni.getStorage({
				key:"City_lng",
				success: function (res) {
					console.log(res)
						_this.lng=res.data
					}
			})
		},
		onLoad(option) {
			
		},
		onShow() {
			
			// uni.getStorageInfo({	
			// 	success: function (res) {
			// 		console.log(res);
			// 		console.log(res.City_Name);
			// 		console.log(res.City_lat);
			// 		console.log(res.City_lng);
			// 	}
			// });
		},
		mounted() {
		this.position()
		},
		methods:{
			// 搜索
			searchinput() {
				let _that = this;
				searchPosition({keyword:_that.keyword}).then(res=>{
					_that.CityList=res.data.list
					console.log(res,111)
				})
			// 	_that.CityList.forEach((item) => {
			// 		item.list.forEach(items => {
			// 			if (items.name === _that.keyword) {
			// 				setTimeout(() => {
			// 					uni.showToast({
			// 						'title': '城市切换成功',
			// 						'icon': 'none'
			// 					})
			// 					_that.CityName = _that.keyword
			// 					uni.setStorage({
			// 						key: 'City_Name',
			// 						data: _that.CityName
			// 					})
			// 				}, 2000);
			// 			}
			
			// 		})
			// 	})
			},
			//提交位置信息
			position(){
				let data={
					lat:this.lat,
					lng:this.lng,
				}
				postLocation(data).then(res=>{
					this.CityList=res.data.list
					console.log(res.data,999)
				})
			},
			//获取定位点
			getLetter(name) {
				this.LetterId = name
				uni.pageScrollTo({
					selector: '#' + name,
					duration: 300
				})
			},
			//存储城市缓存
			getStorage(Name) {
				uni.setStorage({
					key: 'City_Name',
					data: Name.city_name
				})
				uni.setStorage({
					key: 'City_lat',
					data: Name.lat
				})
				uni.setStorage({
					key: 'City_lng',
					data: Name.lng
				})
				//跳转返回
				uni.navigateBack({
					url: '/pages/index/index'
				})
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.search {
		width: 92%;
		margin-left: 4%;
		margin-top: 10rpx;
		margin-bottom: 10rpx;

	}

	.ynq-Location {
		height: 100vh;
	}

	.ynq-AutoLocation {
		width: calc(100% - 40rpx);
		background: rgba(250, 250, 250, .5);
		padding: 20rpx 20rpx;

		text.ynq {
			font-size: 32rpx;
			margin-right: 10rpx;
		}

		text {
			font-size: 30rpx;
		}
	}

	.ynq-HotCity {
		padding: 20rpx;
	}

	.ynq-HotCityTitle {
		padding: 0rpx 0rpx;

		text.ynq {
			margin-right: 10rpx;
			color: #ff0000;
			font-size: 32rpx;
		}

		text {
			font-size: 30rpx;
		}
	}

	.ynq-HotCityList {
		padding: 20rpx 20rpx 20rpx 0;
		flex-wrap: wrap !important;

		text {
			width: 32%;
			display: inline-block;
			text-align: center;
			background: rgba(200, 200, 200, .2);
			margin-bottom: 10rpx;
			font-size: 26rpx;
			padding: 20rpx 0;
		}
	}

	.ynq-Letter {
		position: fixed;
		right: 5rpx;
		top: 180rpx;
		width: 30rpx;
		z-index: 100;

		view {
			display: block;
			width: 30rpx;
			text-align: center;
			height: 35rpx;
			line-height: 35rpx;
			font-size: 22rpx;
			transition: ease .3s;
			-webkit-transition: ease .3s;
		}
	}

	.ynq-CityList {
		padding: 0px 40rpx 0 20rpx;

		.ynq-CityLetter {
			line-height: 30rpx;
			height: 40rpx;
			font-size: 24rpx;
			border-bottom: 1px solid #f7f7f7;
			padding-left: 10rpx;
			color: #909090;
		}

		.ynq-CityLine {
			margin: 20rpx 0px;

			text {
				display: block;
				line-height: 60rpx;
				padding: 0px 10rpx;
				font-size: 30rpx;
				color: #767676;

				&:nth-child(even) {
					background-color: rgba(200, 200, 200, .12);
				}
			}
		}
	}

	.ynq-ScrollView {
		height: calc(100vh - 160rpx);
	}

	.Click-Latter {
		font-size: 30rpx !important;
	}
</style>